<template>
    <div class="app-container">
        <el-form ref="payForm" :model="payForm" :rules="rules" class="form-container">
            <div class="createPost-main-container">
                <div style="margin-bottom: 20px">
                    <label>微信支付</label>
                </div>
                <el-form-item prop="mchid" style="margin-bottom: 40px;" label-width="90px" label="商户号:">
                    <el-input v-model="payForm.mchid" :rows="1" class="article-textarea" autosize placeholder="请输入商户号" />
                </el-form-item>
                <el-form-item prop="signkey" style="margin-bottom: 40px;" label-width="90px" label="商户密钥:">
                    <el-input v-model="payForm.signkey" :rows="1" class="article-textarea" autosize placeholder="请输入商户密钥" />
                </el-form-item>
                <el-form-item prop="key_path" style="margin-bottom: 40px;" label-width="150px" label="上传证书（apiclient_cert.p12）">
                    <FileUpload :limit="1" :file-list="keyPathList" @fileListChange="keyPathChange" />
                </el-form-item>
                <el-form-item prop="cert_file" style="margin-bottom: 40px;" label-width="150px" label="上传证书（apiclient_cert.pem）">
                    <FileUpload :limit="1" :file-list="certFileList" @fileListChange="certFileChange" />
                </el-form-item>
                <el-form-item prop="key_file" style="margin-bottom: 40px;" label-width="150px" label="上传证书密钥（apiclient_key.pem）">
                    <FileUpload :limit="1" :file-list="keyFileList" @fileListChange="keyFileChange" />
                </el-form-item>
                <el-button v-loading="loading" style="margin-left: 10px;" type="primary" @click="submitForm">
                    保存
                </el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import { fetch, set } from '@/pay/api/conf/wx'

import FileUpload from '@/platform/components/FileUpload'

const defaultForm = {
    mchid: '',
    signkey: '',
    key_path: '',
    cert_file: '',
    key_file: ''
}

export default {
    components: { FileUpload },
    data() {
        const validateRequire = (rule, value, callback) => {
            if (value === '') {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        return {
            payForm: Object.assign({}, defaultForm),
            rules: {
                mchid: [{ validator: validateRequire, message: '商户号为必填字段', trigger: 'blur' }],
                signkey: [{ validator: validateRequire, message: '商户密钥为必填字段', trigger: 'blur' }]
            },
            loading: false,
            keyPathList: [],
            certFileList: [],
            keyFileList: []
        }
    },
    created() {
        fetch().then(res => {
            this.payForm.mchid = res.data.mchid
            this.payForm.signkey = res.data.signkey
            this.payForm.key_path = res.data.key_path
            this.payForm.cert_file = res.data.cert_file
            this.payForm.key_file = res.data.key_file
            if (res.data.key_path !== null && res.data.key_path !== '' && res.data.key_path !== undefined) {
                this.keyPathList.push({
                    name: res.data.key_path
                })
            }
            if (res.data.cert_file !== null && res.data.cert_file !== '' && res.data.cert_file !== undefined) {
                this.certFileList.push({
                    name: res.data.cert_file
                })
            }
            if (res.data.key_file !== null && res.data.key_file !== '' && res.data.key_file !== undefined) {
                this.keyFileList.push({
                    name: res.data.key_file
                })
            }
        })
    },
    methods: {
        keyPathChange(data) {
            if (data.fileList.length > 0) {
                this.payForm.key_path = data.fileList[0].name
            }
        },
        certFileChange(data) {
            if (data.fileList.length > 0) {
                this.payForm.cert_file = data.fileList[0].name
            }
        },
        keyFileChange(data) {
            if (data.fileList.length > 0) {
                this.payForm.key_file = data.fileList[0].name
            }
        },
        submitForm() {
            this.$refs.payForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const data = this.payForm
                    set(data).then(response => {
                        this.$notify({
                            title: '成功',
                            message: '修改成功',
                            type: 'success',
                            duration: 2000
                        })
                        // this.postForm.status = 'published'
                        this.loading = false
                        // this.$router.push('/store/index')
                    }).catch(err => {
                        console.log(err)
                        this.loading = false
                    })
                }
            })
        }
    }
}
</script>

<style>
</style>
